<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品类型</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-steps :active="active" align-center >
      <el-step title="添加类别" description="选择商品类别" icon="el-icon-circle-plus" ></el-step>
      <el-step title="填写其他信息" description="填写其他商品信息"  icon="el-icon-edit"></el-step>
      <el-step title="添加图片" description="添加商品图片" icon="el-icon-picture"></el-step>
      <el-step title="提交" description="检查提交"  icon="el-icon-upload" ></el-step>
    </el-steps>
    <el-divider></el-divider>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="商品类别" prop="categoryId">
        <div>
          <el-select v-model="ruleForm.categoryName" placeholder="请选择商品类型">
            <el-option
                :value="ruleForm.categoryName">
              <el-popover
                  placement="bottom"
                  width="400"
                  style="height: 300px"
                  trigger="hover"
                  v-for="parent in category_parent"
                  @show="selectCategory1(parent.id)"
              >
                <el-popover
                    placement="bottom"
                    width="400"
                    trigger="hover" v-for="c in category"
                    @show="selectCategoryChildren(c.id)"

                >
                  <el-button slot="reference" style="margin: 0px ;width: 100px; height: 50px"><a class="a1" @click="setValue(c.name,c.id)" >{{ c.name }}</a></el-button>

                  <el-button v-for="children in category_children ">
                    <a class="a1" @click="setValue(children.name,children.id)" >
                      {{children.name}}
                    </a>
                  </el-button>

                </el-popover>

                <el-button slot="reference" style="margin: 0px ;width: 190px; height: 50px">{{ parent.name }}</el-button>
              </el-popover>

            </el-option>

          </el-select>
        </div>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item style="margin-left: 300px"  label="包装类型" prop="packName">
        <el-select v-model="ruleForm.packId" placeholder="请选择商品包装类型">
          <el-option
              v-for="item in pack"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>

      </el-form-item>
      <el-divider></el-divider>
      <el-form-item style="margin-left: 600px" label="出版社" prop="pressName">
        <el-select v-model="ruleForm.pressId"  placeholder="请选择出版社">
          <el-option
              v-for="item in press"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      ruleForm: {
        categoryId:0,
        categoryName:"",
        pressName:"",
        packName:"",
        pressId:1,
        packId:2,
      },
      pack:[
        {id:1,name:"hh"}
      ],
      press:[ {id:1,name:"hh"}],
      rules: {

      },
      category: [],
      category_parent: [],
      category_children: [],
      active:1
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.categoryName=null;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //查询包装类型id
          let url = 'http://localhost:8080/adminGoodsAddNew/'+this.ruleForm.packId+'/packByid';
          console.log('url = ' + url);
          this.axios.get(url).then((response) => {
            console.log('response = ' + response);
            let responseBody = response.data;
            this.ruleForm.packName = responseBody.data;
          });
          //查询出版社类型id
          let url1 = 'http://localhost:8080/adminGoodsAddNew/'+this.ruleForm.pressId+'/pressByid';
          console.log('url1 = ' + url1);
          this.axios.get(url1).then((response) => {
            console.log('response = ' + response);
            let responseBody = response.data;
            this.ruleForm.pressName = responseBody.data;
          });
          let ruleFormString = JSON.stringify(this.ruleForm);
          localStorage.setItem('ruleForm', ruleFormString);
          console.log(this.ruleForm)
          this.$router.push('goodsAddNew1')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    selectCategory1(id) {
      //查询儿子级类别
      console.log('id = ' + id);
      let url = 'http://localhost:8080/indexs/' + id + '/selectCategoryById';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category = responseBody.data;
      });
    },
    selectCategoryParent() {
      //查询父级级类别
      let url = 'http://localhost:8080/indexs/selectCategoryParent';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category_parent = responseBody.data;
      });
    },
    selectCategoryChildren(id){
      //查询孙子级类别
      console.log('id = ' + id);
      let url = 'http://localhost:8080/indexs/' + id + '/selectCategoryChildrenById';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category_children = responseBody.data;
      });
    },
    selectPackList() {
      //查询包装类型
      let url = 'http://localhost:8080/adminGoodsAddNew/selectPackList';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.pack = responseBody.data;
      });
    },
    selectPressList() {
      //查询出版社
      let url = 'http://localhost:8080/adminGoodsAddNew/selectPressList';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.press = responseBody.data;
      });
    },

   setValue(value, id) {
      this.ruleForm.categoryName=value;
      this.ruleForm.categoryId=id;
      console.log(id)
      console.log(value)
   }

  },
  mounted() {
    this.selectCategoryParent();//查询父级类别
    this.selectPackList();
    this.selectPressList();
    let item = localStorage.getItem('ruleForm');
    if(item){
      let loc=JSON.parse(item)
      this.ruleForm.categoryId=loc.categoryId;
      this.ruleForm.categoryName=loc.categoryName;
      this.ruleForm.pressId=loc.pressId;
      this.ruleForm.packId=loc.packId;
    }
  }
}
</script>

<style scoped>

</style>